<template>
  <!-- 图文列表 -->
  <div class="imageText">
    <ul class="imageTextUl">
      <li v-for="(item, index) in list" :key="item.id" class="imageTextLi">
        <el-card shadow="hover">
          <el-tooltip :content="item.title" placement="top-start" effect="light">
            <h4 class="title">{{ item.title }}</h4>
          </el-tooltip>
          <el-image class="image" :src="item.picUrl" fit="fit" @click.native="toDetails(item)" />
          <h5 class="createTime">
            <span>{{ item.updateTime | timeFormate }}</span>
            <el-popover placement="bottom" width="0.8rem" trigger="click" :popper-class="`Popover${item.id} imageTextPopover`">
              <p v-for="(data, keys) in colorsFormate(item.status).taskStatus" :key="keys" class="title">
                <el-button type="text" @click="changeClick(item, index, data.value)">{{ data.label }}</el-button>
              </p>
              <el-button slot="reference" type="text" style="padding:0;float:right;color:#333;"><svg-icon icon-class="spot" /></el-button>
            </el-popover>
          </h5>
          <h5 class="remarks">备注：{{ item.remark || '无' }}</h5>
          <h5 class="taskStatus" :style="{color: `${colorsFormate(item.status).color}`}">{{ `${colorsFormate(item.status).name}` }}</h5>
        </el-card>
      </li>
      <li v-if="!list.length>0" class="nodata">暂无数据</li>
    </ul>
    <!-- 流程详情 -->
    <process-dialog ref="ProcessDialog" />
  </div>
</template>

<script>
import { bus } from '@/main'
import ProcessDialog from '../components/ProcessDesc-dialog'
export default {
  name: 'ImageText',
  components: { ProcessDialog },
  data() {
    return {
      list: [],
      name: '',
      dialogInput: '',
    }
  },
  methods: {
    // 获取父级传递的数据
    getData(data, name) {
      this.list = data
      this.name = name
    },
    colorsFormate(key) {
      // 只有待提交和已退回的素材才可以删除和编辑，其余状态的素材不可编辑和删除
      // 备注则随时可以修改；
      // 只有审核中可以撤回；
      // 只有待提交和已退回的才可以提交
      switch (key) {
        case '1':
          const obj1 = {
            color: '#FF9824',
            name: '待提交',
            taskStatus: [
              { label: `编辑${this.name}`, value: 'editClick' },
              { label: `备注${this.name}`, value: 'remarkClick' },
              { label: `删除${this.name}`, value: 'deleteClick' },
              { label: `提交${this.name}`, value: 'submiClick' },
              { label: `审核进度`, value: 'processClick' }
            ]
          }
          return obj1
          break
        case '2':
          const obj2 = {
            color: '#5B10B5',
            name: '审核中',
            taskStatus: [
              { label: `备注${this.name}`, value: 'remarkClick' },
              { label: `撤回${this.name}`, value: 'recallClick' },
              { label: `审核进度`, value: 'processClick' }
            ]
          }
          return obj2
          break
        case '3':
          const obj3 = {
            color: '#0698FD',
            name: '已审核',
            taskStatus: [
              { label: `备注${this.name}`, value: 'remarkClick' },
              { label: `审核进度`, value: 'processClick' }
            ]
          }
          return obj3
          break
        case '4':
          const obj4 = {
            color: '#23BC39',
            name: '已发布',
            taskStatus: [
              { label: `备注${this.name}`, value: 'remarkClick' },
              { label: `审核进度`, value: 'processClick' }
            ]
          }
          return obj4
          break
        case '5':
          const obj5 = {
            color: '#FF5657',
            name: '已退回',
            taskStatus: [
              { label: `编辑${this.name}`, value: 'editClick' },
              { label: `备注${this.name}`, value: 'remarkClick' },
              { label: `删除${this.name}`, value: 'deleteClick' },
              { label: `提交${this.name}`, value: 'submiClick' },
              { label: `审核进度`, value: 'processClick' }
            ]
          }
          return obj5
          break
        default:
          break
      }
    },
    // click
    changeClick(data, index, name) {
      this[name](data, index)
    },
    // 编辑
    editClick(data, index) {
      // data：传输选中数据的ID至详情页，
      // 如果传递ID，则表示为编辑，并以ID请求数据，绑定至对应节点。
      // 如不传ID，表示为新增终端
      this.$router.push({
        path: `/Dashboard/dashboardEdit`,
        query: {
          id: data.id
        }
      })
    },
    // 备注
    remarkClick(data, index) {
      this.$prompt('', `修改${this.name}备注`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: data.remark,
        inputPattern: '',
        inputErrorMessage: '',
        center: true
      }).then(({ value }) => {
        this.$api.imageTextListEditRemark({ id: data.id, remark: value.trim() }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('修改成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 删除
    deleteClick(data, index) {
      this.$confirm('是否确认删除该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.imageTextListDelete({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('删除成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 提交
    submiClick(data, index) {
      this.$confirm('是否确认提交该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.imageTextListSubmit({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('提交成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 撤回
    recallClick(data, index) {
      this.$confirm('是否确认撤回该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.imageTextListRecall({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('撤回成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 审核进度
    processClick(data, index) {
      this.$api.getBpcDetails({materialId: data.id}).then((response) => {
        if (response.data.status == 1) {
          this.$refs.ProcessDialog.getData(response.data.data, true)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    toDetails(data) {
      this.$router.push({
        path: `/Dashboard/dashboardDetails`,
        query: {
          id: data.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.imageText {
  width: 100%;
  min-height: calc(100vh - 3.7rem);
  .imageTextUl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    .imageTextLi {
      width: 18%;
      min-width: 2rem;
      margin: 0.15rem;
      >>>.el-card {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .el-card__body {
          padding: 0.2rem;
          font-size: 0.16rem;
          .title{
            width: 100%;
            height: 0.2rem;
            white-space: nowrap;
            margin: 0 0 0.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .image{
            width: 100%;
            height: 1.2rem;
            margin: 0 0 0.1rem;
            cursor: pointer;
          }
          .createTime {
            margin: 0 0 0.1rem;
          }
          .date,
          .remarks,
          .remarks,
          .taskStatus{
            color: #8D8D8D;
            white-space: nowrap;
            margin: 0 0 0.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .taskStatus {
            margin: 0;
          }
        }
      }
    }
    .nodata {
      width: 100%;
      text-align: center;
      height: 1rem;
      line-height: 1.3rem;
      color: #999;
    }
  }
}
</style>
<style lang="scss">
.imageTextPopover {
  min-width: 1rem;
  .title {
    text-align: center;
    margin-bottom: 0;
    .el-button {
      padding:0;
      color:#333;
      font-size: 0.16rem
    }
    .el-button:hover {
      span {
        color: #409EFF;
      }
    }
  }
  .title:nth-of-type(1) {
    margin: 0;
  }
}

</style>
